<template>
    <el-row type="flex" align="middle" class="panel-multiple">
        <div class="select-panel-left">
            <span class="header-title">省份</span>
            <ul>
                <el-radio-group v-model="provinceList">
                    <li v-for="province in provinces" :key="province.id">
                        <el-radio :label="province.id">
                            <el-row type="flex" align="middle" justify="space-between">
                                <el-button @click="clickProvince(province.id)" type="text">
                                    {{province.name}}<i class="el-icon-arrow-right"></i>
                                </el-button>
                            </el-row>
                        </el-radio>
                    </li>
                </el-radio-group>
            </ul>
        </div>
        <div class="select-panel-left">
            <span class="header-title">城市</span>
            <ul>
                <el-radio-group v-model="cityList">
                    <li v-for="city in citys" :key="city.id">
                        <el-radio :label="city.id">
                            <el-row type="flex" align="middle" justify="space-between">
                                <el-button @click="clickCity(city.id)" type="text">
                                    {{city.name}}<i class="el-icon-arrow-right"></i>
                                </el-button>
                            </el-row>
                        </el-radio>
                    </li>
                </el-radio-group>
            </ul>
        </div>
        <div class="select-panel-left">
            <span class="header-title">区县</span>
            <ul>
                <li>
                    <el-checkbox v-if="countys && countys.length > 0" v-model="isAllSelectCounty" @change="selectAll('county', $event)" :indeterminate="isIndeterminate(countys)">全选</el-checkbox>
                </li>
                <el-checkbox-group v-model="countyList">
                    <li v-for="county in countys" :key="county.id">
                        <el-checkbox :label="county.id" @change="selectProvince('county', county.id, $event)">
                            <el-row type="flex" align="middle" justify="space-between">
                                {{county.name}}</el-row>
                        </el-checkbox>
                    </li>
                </el-checkbox-group>
            </ul>
        </div>
        <i class="el-icon-d-arrow-right"></i>
        <div class="select-panel-left">
            <span class="header-title">已选<el-button @click="clear" style="padding: 0;width: auto;color: #409EFF;" type="text">清空
                </el-button></span>
            <ul>
                <li class="dx-selected" v-for="selId in selected" :key="selId">
                    <el-row type="flex" justify="space-between" align="middle">
                        {{getCityName(selId)}}<i @click="remove(selId)" class="el-icon-close"></i>
                    </el-row>
                </li>
            </ul>
        </div>
    </el-row>
</template>

<script>
    import cityJson from '@/util/city.json'
    export default {
        name: 'CountyPicker',
        model: {
            prop: 'inputCitys',
            event: 'change'
        },
        props: ['inputCitys'],
        mounted() {
            for (const k in cityJson) {
                const ele = cityJson[k]
                if (ele['parent'] == 0) {
                    this.provinces.push({
                        id: ele['id'],
                        name: ele['name']
                    })
                }
                // ele['checked'] = false
                this.cityData.push(ele)
            }
        },
        watch: {
            inputCitys: {
                immediate: true, // 很重要！！！
                handler() {
                    if (this.inputCitys) {
                        // console.log('this.inputCitys', this.inputCitys)
                        this.inputCitys.forEach((ele) => {
                            let city = this.cityData.find((c) => {
                                return c.id == ele
                            })
                            if (city) {
                                // if (city.parent == 0) {
                                //     this.selected.push(ele)
                                //     // 添加所有下级
                                //     this.cityData.forEach(e=>{
                                //         if (e.parent == ele) {
                                //             this.selected.push(e.id)
                                //         }
                                //     })
                                // } else {
                                if (this.selected.findIndex(se => {
                                        return se == ele
                                    }) == -1) {
                                    this.selected.push(ele)
                                }
                                // }
                            }
                        })
                    }
                }
            }
        },
        data() {
            return {
                cityData: [],
                provinceList: '',
                provinces: [],
                selectProvinceId: 0,
                cityList: [],
                selectCityId: 0,
                citys: [],
                // countyList: [],
                countys: [],
                selected: [],
            }
        },
        computed: {
            isAllSelectCounty: {
                get: function () {
                    if (this.selected.length <= 0) {
                        return false
                    }
                    let isChecked = true
                    this.countys.forEach(e => {
                        if (this.selected.indexOf(e.id) == -1) {
                            isChecked = false
                        }
                    })
                    return isChecked
                },
                set: function () {
                    // console.log(val)
                }
            },
            countyList: {
                get: function () {
                    let c = []
                    this.countys.forEach(e => {
                        if (this.selected.indexOf(e.id) > -1) {
                            c.push(e.id)
                        }
                    })
                    return c
                },
                set: function (val) {
                    val.forEach(e => {
                        if (this.selected.indexOf(e) == -1) {
                            this.selected.push(e)
                        }
                    })
                }
            }
        },
        methods: {
            isIndeterminate() {
                if (this.countyList.length > 0 && this.countyList.length < this.countys.length) {
                    return true
                }
                return false
            },
            selectAll(type, event) {
                if (event) {
                    this.countys.forEach((ele) => {
                        if (this.selected.indexOf(ele.id) == -1) {
                            this.selected.push(ele.id)
                        }
                        //this.countyList.indexOf(ele.id) == -1
                    })
                } else {
                    this.countys.forEach((ele) => {
                        let idx = this.selected.indexOf(ele.id)
                        if (idx > -1) {
                            this.selected.splice(idx, 1)
                        }
                    })
                }

                this.sendEvent()
            },
            getCity(cityId) {
                let city = this.cityData.find((ele) => {
                    return ele['id'] == cityId
                })
                return city
            },
            getCityName(cityId) {
                let city = this.getCity(cityId)
                return city['name']
            },
            reloadCitys() {
                // 查询下级所有信息
                this.citys = []
                let citys = this.cityData.filter((ele) => {
                    return ele.parent == this.selectProvinceId && ele.level == 2
                })
                if (citys.length <= 0) {
                    let province = this.cityData.find((ele) => ele.id == this.selectProvinceId)
                    citys = [province]
                }
                // citys.forEach((ele) => {
                //     if (ele.checked) {
                //         this.selected.city.push(ele.id)
                //     }
                // })
                this.citys = citys
            },
            reloadCountys() {
                // 查询下级所有信息
                this.countys = []
                let countys = this.cityData.filter((ele) => {
                    return ele.parent == this.selectCityId
                })
                this.countys = countys
                // console.log('selectCityId', this.selectCityId, countys)
            },
            clickProvince(proId) {
                if (this.selectProvinceId == proId) {
                    return
                }
                this.selectProvinceId = proId
                this.reloadCitys()
                // 清空 区县
                this.countys = []
            },
            clickCity(cityId) {
                this.selectCityId = cityId
                this.reloadCountys()
            },
            selectProvince(type, clickId, event) {
                // console.log(type, clickId, value)
                if (type == 'province') {
                    // 将省添加到选中
                    // let province = this.getCity(clickId)
                    if (event) {
                        this.cityData.forEach((ele) => {
                            if (ele.parent == clickId) {
                                if (this.selected.city.indexOf(ele.id) == -1) {
                                    this.selected.city.push(ele.id)
                                }
                            }
                        })
                    } else {
                        this.cityData.forEach((ele) => {
                            if (ele.parent == clickId) {
                                let idx = this.selected.city.indexOf(ele.id)
                                if (idx > -1) {
                                    this.selected.city.splice(idx, 1)
                                }
                            }
                        })
                    }
                    
                } else if (type == 'city') {
                    // 市级
                    // let city = this.getCity(clickId)
                    // 选中时，检查整个省级下的市是不是都选择了，如果是，改选中为省级，清除市级数据
                    // this.check(city, event)

                } else if (type == 'county') {
                    let idx = this.selected.findIndex(e => {
                        return e == clickId
                    })
                    if (event) {
                        if (idx == -1) {
                            this.selected.push(clickId)
                        }
                    } else {
                        if (idx > -1) {
                            this.selected.splice(idx, 1)
                        }
                    }
                }
                this.sendEvent()
            },
            sendEvent() {
                this.$emit('change', this.selected)
            },
            clear() {
                this.selected = []
                this.sendEvent()
            },
            remove(id) {
                let idx = this.selected.indexOf(id)
                this.selected.splice(idx, 1)
                
                this.sendEvent()
            }
        }
    }
</script>

<style>
    .panel-multiple .select-panel-left ul {
        height: 192px;
        padding: 6px 0;
        overflow-y: auto;
        position: relative;
    }

    .select-panel-left ul li {
        padding: 6px 12px;
        position: relative;
        cursor: pointer;
        line-height: initial;
    }

    .panel-multiple .select-panel-left .el-radio-group {
        width: 100%;
    }

    .panel-multiple .select-panel-left .el-radio {
        width: 100%;
    }

    .panel-multiple .select-panel-left .el-radio__label {
        width: 100%;
        display: inline-block;
        padding-left: 10px;
        line-height: 19px;
        font-size: 14px;
        padding-left: 0;
    }

    .panel-multiple .select-panel-left .el-radio__input {
        display: none;
    }
    .panel-multiple .select-panel-left .el-button {
        width: 100%;
        padding: 0;
        color: #606266;
    }

    .panel-multiple .select-panel-left .el-button span {
        width: 100%;
        text-indent: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
</style>